<template>
  <view class="workbench-wrap">
    <!-- floatBallPosition已在插件的mixin文件中定义 -->
    <css-float-ball v-model="floatBallPosition">
      <!-- <ball/> 为自己实现的球本体。如示例内的<ball/>组件 -->
      <!-- <ball/> -->
      <view class="float-ball-icon" hover-class="default-icon-hover" @click="()=>{}">
        <icon type="success" :size="48"/>
      </view>
    </css-float-ball>
    <view class="workbench-main-wrap">
      <scroll-view v-if="false" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
                   :refresher-threshold="100" refresher-background="lightgreen" @refresherpulling="onPulling"
                   @refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort">
        <view v-for="(v) in 100" class="welcome-title">{{v}}</view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
// pages.json 中 easycom 为自动读取uni_modules内插件时，可省略
// import CssFloatBall from  '@/uni_modules/css-float-ball/components/css-float-ball/css-float-ball'
// import Ball from  '@/components/ball/ball'
import FloatBallMixin from '../../uni_modules/css-float-ball/components/css-float-ball/mixin'

export default {
  name: 'WorkBench',
  // pages.json 中 easycom 为自动读取uni_modules内插件时，可省略
  // components:{
  //   CssFloatBall,
  //   Ball,
  // },
  mixins:[FloatBallMixin],
  data(){
    return{
      triggered:false
    }
  },
  methods:{
    onPulling(e){
      console.log('onPulling',e)
    },
    onRefresh(e){
      console.log('onRefresh',e)
      if (this._freshing) return;
      this._freshing = true;
      setTimeout(() => {
        this.triggered = false;
        this._freshing = false;
      }, 3000)
    },
    onRestore(e){
      console.log('onRestore',e)
      this.triggered = 'restore'; // 需要重置
    },
    onAbort(e){
      console.log('onAbort',e)
    },
  },
  onPullDownRefresh() {
    setTimeout(uni.stopPullDownRefresh,30000)
  },
  onLoad(){
    this._freshing = false;
    console.log(getApp().$children[0].$children[0].$children[0])
    setTimeout(() => {
      this.triggered = true;
    }, 1000)
  }
}
</script>
<style lang="scss" scoped>
@import "index";
.float-ball-icon {
  background-color: #FFF;
  width: 128rpx;
  height: 128rpx;
  border-radius: 50%;
  @extend .defaultFlex;
  -webkit-box-shadow: 0rpx 8rpx 20rpx 8rpx rgba(204, 204, 204, 0.47);
  -moz-box-shadow: 0rpx 8rpx 20rpx 8rpx rgba(204, 204, 204, 0.47);
  box-shadow: 0rpx 8rpx 20rpx 8rpx rgba(204, 204, 204, 0.47);
}
</style>
